<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP的滚动插件</title>
    <style>
        
    </style>
</head>

<body>
    <section class="imgname" style="background-image: url('https://picsum.photos/1024/900?1');">
        <h1>Simple parallax sections</h1>
    </section>
    <section class="imgname" style="background-image: url('https://picsum.photos/1024/900?2');">
        <h1>Hey look,a title</h1>
    </section>
    <section class="imgname" style="background-image: url('https://picsum.photos/1024/900?3');">
        <h1>They just keep coming</h1>
    </section class="imgname">
    <section class="imgname" style="background-image: url('https://picsum.photos/1024/900?4');">
        <h1>So smooth though</h1>
    </section>
    <section class="imgname" style="background-image: url('https://picsum.photos/1024/900?5');">
        <h1>Nice,right?</h1>
    </section>
    <style>
        
    .imgname {
        width: 100%;
        height: 99vh;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        object-fit: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
    <script>
        const sections = document.querySelectorAll('section')
        gsap.registerPlugin(ScrollTrigger)
        sections.forEach(section=>{
            gsap.fromTo(section,
            { 
                backgroundPositionY:`-${window.innerHeight/2}px`
            },
            {
                backgroundPositionY:`${window.innerHeight/2}px`,
                duration:3,
                ease:'none',
                scrollTrigger: {
                    trigger: section,
                    scrub: true
                }
            })
        })
        
        
    </script>
</body>

</html>